<template>
    <div class="ele-body">
       <!-- 搜索表单 -->
       <saleordertrackSearch @search="reload"  />
      <!-- 数据表格 -->
      <el-card shadow="never">
        <ele-pro-table
          ref="table"  row-key="id" :columns="columns" :datasource="datasource"  :need-page="true"  show-summary :summary-method="getSummaries"  :cell-style="cellStyle"  @done="onDone"  :height="tableHeight" :full-height="tableFullHeight"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
              size="small"
              icon="el-icon-upload2"
              class="ele-btn-icon"
              @click="reportexcel"
            >
              导出
            </el-button>
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }"  >
            <el-link type="info"  :underline="false"  icon="el-icon-menu" @click="openEdit(row)" >明细</el-link>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <!-- 导出数据 -->
      <ExportDialog ref="ExportDialog"></ExportDialog>
    </div>
  </template>
  
  <script>
    
    import ExportDialog from '@/components/Excel/ExportDialog'
    import saleordertrackSearch from './components/saleordertrack-search.vue';
    import { QuerySaleOrderTrackByCondition } from '@/api/statistics';


    export default {
      name: 'SaleOrderTrack',
      components: {ExportDialog,saleordertrackSearch},
      data() {
        return {
          // 表格列配置
          columns: [
            {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
            {
              prop: 'orderDate', label: '订单日期', width: 150, showOverflowTooltip: true, align: 'center',
              formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
            },
            {prop: 'orderNo', label: '订单编号', showOverflowTooltip: true,align: 'center',},
            {prop: 'customerNo', label: '客户编码', showOverflowTooltip: true,align: 'center',},
            {prop: 'customerName', label: '客户', showOverflowTooltip: true,align: 'center',},
            {prop: 'qty', label: '数量', showOverflowTooltip: true, align: 'center',},
            {prop: 'amount', label: '金额', showOverflowTooltip: true,align: 'center',},
            {prop: 'outStatusDesc', label: '出库状态', showOverflowTooltip: true,align: 'center',},
            {prop: 'outQty', label: '已出库数量', showOverflowTooltip: true,align: 'center',},
            {prop: 'outAmount', label: '已出库金额', showOverflowTooltip: true,align: 'center',},
            {prop: 'surplusOutQty', label: '未出库数量', showOverflowTooltip: true,align: 'center' },
            {prop: 'surplusOutAmount', label: '未出库金额', showOverflowTooltip: true, align: 'center'},
            {prop: 'receAmount', label: '收款金额', showOverflowTooltip: true,align: 'center', },
            {prop: 'returnAmount', label: '退款金额', showOverflowTooltip: true,align: 'center', },
            {prop: 'surplusAmount', label: '未收款金额', showOverflowTooltip: true,align: 'center', },
            {prop: 'preAmount', label: '预收金额', showOverflowTooltip: true,align: 'center', },
          ],
          //是否详情
          fixedHeight:true,

          qtyTotal:0,
          amountTotal:0,
          outQtyTotal:0,
          outAmountTotal:0,
          surplusOutQtyTotal:0,
          surplusOutAmountTotal:0,
          receAmountTotal:0,
          returnAmountTotal:0,
          surplusAmountTotal:0,
          preAmountTotal:0,
          // 导出列
          exportList: [
            { name: "订单日期", keys: "orderDate", status: true },
            { name: "订单编号", keys: "orderNo", status: true },
            { name: "客户编码", keys: "customerNo", status: true },
            { name: "客户", keys: "customerName", status: true },
            { name: "数量", keys: "qty", status: true },
            { name: "金额", keys: "amount", status: true },
            { name: "出库状态", keys: "outStatusDesc", status: true },
            { name: "已出库数量", keys: "outQty", status: true },
            { name: "已出库金额", keys: "outAmount", status: true },
            { name: "未出库数量", keys: "surplusOutQty", status: true },
            { name: "未出库金额", keys: "surplusOutAmount", status: true },
            { name: "收款金额", keys: "receAmount", status: true },
            { name: "退款金额", keys: "returnAmount", status: true },
            { name: "未收款金额", keys: "surplusAmount", status: true },
            { name: "预收金额", keys: "preAmount", status: true },
          ]
        };
      },
      computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

          return fh;
        },
      },
      methods: {
        /* 表格数据源 */
        async datasource(params) {
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "orderDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }

          console.log('params.where',params.where);
        
          let data = await QuerySaleOrderTrackByCondition(params.where);

          console.log('data',data);

          this.qtyTotal= data.qtyTotal;
          this.amountTotal= data.amountTotal;
          this.outQtyTotal= data.outQtyTotal;
          this.outAmountTotal= data.outAmountTotal;
          this.preAmountTotal= data.preAmountTotal;
          this.receAmountTotal= data.receAmountTotal;
          this.returnAmountTotal= data.returnAmountTotal;
          this.surplusAmountTotal= data.surplusAmountTotal;
          this.surplusOutQtyTotal= data.surplusOutQtyTotal;
          this.surplusOutAmountTotal= data.surplusOutAmountTotal;

          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
          
          return {
              list:data.saleOrderTrackView,
              count:data.totalCount,
          };
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
          this.supplierList = data;
        },
        /* 刷新表格 */
        reload(where) {
          
          this.$refs.table.reload({ where: where });
        },
        

        /* 导出 */
        reportexcel(pams) {

          //初始化参数
          let params = {
            pagesize: 0,
            pageindex: 1,
            conditions: {},
            orderBys: [{ sort: "orderDate", order: 1, }],
          };
          //加载进度条
          const loading = this.$loading({ lock: true });
          //重新请求查询
          this.$refs.table.doRequest(({ where }) => {
          if(where){
            params.orderBys = where.orderBys;
            params.pageindex = where.pageindex;
            params.conditions = where.conditions;
          }
          //查询数据
          QuerySaleOrderTrackByCondition(params)
            .then((data) => {
              loading.close();
              this.$refs.ExportDialog.showEdits = true
              this.$refs.ExportDialog.checkList = this.exportList
              this.$refs.ExportDialog.titleName = "销售订单跟踪表"
              this.$refs.ExportDialog.dataList = data.saleOrderTrackView;
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
          });
        },

        /* 合计 */
        getSummaries(param){
          const sums = [];
          sums[0] = '合计' ;
          const { columns, data } = param;
          columns.forEach((column, index) => {
            if(index == 5){
              sums[index] = Number(this.qtyTotal).toFixed(2);
            }else if(index ==6){
              sums[index] = Number(this.amountTotal).toFixed(4);
            }else if(index ==8){
              sums[index] = Number(this.outQtyTotal).toFixed(4);
            }else if(index ==9){
              sums[index] = Number(this.outAmountTotal).toFixed(4);
            }else if(index ==10){
              sums[index] = Number(this.surplusOutQtyTotal).toFixed(4);
            }else if(index ==11){
              sums[index] = Number(this.surplusOutAmountTotal).toFixed(4);
            }else if(index ==12){
              sums[index] = Number(this.receAmountTotal).toFixed(4);
            }else if(index ==13){
              sums[index] = Number(this.returnAmountTotal).toFixed(4);
            }else if(index ==14){
              sums[index] = Number(this.surplusAmountTotal).toFixed(4);
            }else if(index ==15){
              sums[index] = Number(this.preAmountTotal).toFixed(4);
            }
          });

          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
          return sums;
        },

        /* 样式 */
        cellStyle(param){
          const { row, column, rowIndex, columnIndex } = param;
          if(columnIndex==5||columnIndex==6||columnIndex==7){
            return{
              color:''
            }
          }
        },
      }
    };
  </script>
   <style lang="scss" scoped>
    /*总计字体颜色
    ::v-deep .el-table__footer-wrapper tbody td {
      color: var(--color-primary);
      cursor: pointer;
    }*/
  </style>